iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Modern Web

我與 Blazor 的 30 天系列 第 24

ASP.NET Core Blazor 系列 - 024 內建 Razor 元件 (1)

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

我們介紹完了內建的九種輸入元件,今天來講講其他的內建元件,這邊預計會分成四天來說,有些內建元件可能會需要用到一篇文章的篇幅來做介紹,例如 CascadingValueDynamicComponent 等等,以下正文開始

App

Blazor 建立專案時,就會建立 App.razor 其中使用 Router 元件設定用戶端路由

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Router

提供對應至目前瀏覽狀態的資料

屬性

  • Found 找到對應路由時要顯示內容
  • NotFound 找不到路由顯示的內容
  • OnNavigateAsync 取的新畫面的時候的Callback

Authentication

專案建立時在驗證類型勾選 個別使用者帳戶

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string? Action { get; set; }
}
  • 設定驗證狀態的路由
  • 設定驗證狀態的 UI 內容
  • 管理驗證狀態

AuthorizeView

可以根據使用者是否取得授權來顯示不同的 UI 內容

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authorized.</p>
        <button @onclick="SecureMethod">Authorized Only Button</button>
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>

@code {
    private void SecureMethod() { ... }
}

<Authorized><NotAuthorized> 標籤的內容可以包含任意項目
如果沒有指定授權的條件,預設會使用 登入 登出來做判斷

ErrorBoundary

設計來處理例外情況的元件,用法類似 C# 的 try catch
MainLayout.razor 包裝內容

<div class="main">
    <div class="content px-4">
        <ErrorBoundary>
            <ChildContent>
                @Body
            </ChildContent>
            <ErrorContent>
                <p class="errorUI">Nothing to see here right now. Sorry!</p>
            </ErrorContent>
        </ErrorBoundary>
    </div>
</div>

如果設定在版面配置上,不管在哪一個頁面中出現錯誤,都會看到錯誤的 UI,實務上建議將錯誤的範圍縮小。

Recover 方法可以重設為非錯誤的狀態

小結

今天講的元件中 ErrorBoundary 是比較需要深入的元件,錯誤處理是一件非常重要的事情,如果沒有處理好就會像這樣

行話稱為網站裸奔,如何做好錯誤攔截是需要特別注意的一件,明天會對 CascadingValue 元件做說明,主要的用途是將資料從上層的 Razor 元件 流向子系的元件


上一篇
ASP.NET Core Blazor 系列 - 023 UI Components Llibrary
下一篇
ASP.NET Core Blazor 系列 - 025 內建 Razor 元件 (2) CascadingValue
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言